<template>
  <div class="myMessage">
      <a-tabs default-active-key="1" size="large">
      <a-tab-pane key="1" tab="消息列表">
        <div style="overflow: hidden">
          <ul>
            <li v-for="(item,index) in myMessageList" :key="index">
              <img src="@/assets/image/message.png" alt="">
              <div>
                <p class="title">{{item.title}}</p>
                <div class="time">
                  <p class="timetext">{{item.createDate}}</p>
                  <p class="detail" @click="$router.push(item.trigPath)">点击查看详情 >></p>
                </div>
              </div>
            </li>
          </ul>
          <!-- 分页器 -->
          <a-pagination
            style="text-align: center; margin-top: 30px"
            v-model="pageIndex"
            :total="total"
            :hideOnSinglePage="true"
            :pageSize="pageSize"
            @change="changePagin"
            show-less-items
          />
          <a-empty
              :image="imgUrl"
              :image-style="{
              height: '220px',
              }"
              style="margin: 0 auto; margin-top: 30px"
              v-if="myMessageList.length == 0 && flag"
          />
        </div>
      </a-tab-pane>
    </a-tabs>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: require("@/assets/image/pagint.png"),
      total:0,
      pageSize:6,
      pageIndex:1,
      myMessageList:[],
      flag:false,
      onLoading:false
    };
  },
  mounted(){
    this.getMessageList();
  },
  methods:{
    changePagin(e){
      this.pageIndex = e;
      this.getMessageList();
    },
    getMessageList(){
      this.onLoading = true
      this.$ajax({
        url:"/user/usermsg/list?pageSize="+this.pageSize+"&pageIndex="+this.pageIndex,
        method:"post"
      }).then((res)=>{
        this.flag = true;
        if(res.code == 200){
          this.onLoading = false
          this.myMessageList = res.data.list;
          this.total = res.data.totalCount;
        }else{
          this.onLoading = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  li{
    display: flex;
    width: 910px;
    height: 81px;
    padding: 14px 20px;
    img{
      margin-right: 16px;
      margin-top: 3px;
      width: 20px;
      height: 20px;
    }
    .title{
      color: #666666;
      font-size: 18px;
      line-height: 25px;
    }
    .time{
      display: flex;
      margin-top: 8px;
      .timetext{
        margin-right: 56px;
        color: #999999;
        font-size: 14px;
        line-height: 20px;
      }
      .detail{
        color: #FFBE37;
        font-size: 13px;
        line-height: 18px;
        cursor: pointer;
      }
    }
  }
</style>
